<!DOCTYPE html>
<html lang="cn-ZH">
<head>
    <meta charset="UTF-8">
    <link rel="SHORTCUT ICON" href="./data/img/logo/ico-B.ico">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="./data/css/bootstrap.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="./data/css/common.css">
    <title>web1802聊天室</title>
</head>
<body>
<!--页头------------------------------------------------------------------>
<header id="headerBox" >页头加载中...</header>
<div class="container">
    <h1></h1>
    <div class="panel panel-primary ">
        <!--面板头部-->
        <div class="panel-heading text-center " >
            <b><a href=""style="color:#fff;">WEB1802</a></b>
        </div>
        <div class="panel-footer ">
            <ul class="nav nav-tabs">
                <li class="active"><a >聊天</a></li>
                <li><a >公告</a></li>
                <li><a >相册</a></li>
                <li><a >文件</a></li>
                <li><a >活动</a></li>
                <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                        设置 <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="">聊天</a></li>
                        <li><a href="">公告</a></li>
                        <li><a href="">相册</a></li>
                        <li><a href="">文件</a></li>
                        <li><a href="">活动</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--面板内容-->
        <div class="panel-body " style="height:200px">
            <!--一条消息-->
            <div class="a-message">
                <a  class="user-head"></a>
                <div>
                    <div class="user-name ">用户一</div>
                    <span class="char-message">hello world</span>
                </div>
            </div>
        </div>
        <!--面板底部-->
        <div class="panel-footer">
            <!--底部第一行表情-->
            <div class="row">
                <div class="col-sm-12 ">
                    <i class="icon-font i-smile"></i>
                    <i class="icon-font i-data-border"></i>
                    <i class="icon-font i-star-border"></i>
                    <i class="icon-font i-test-border"></i>
                    <i class="icon-font i-comment"></i>
                    <i class="icon-font i-calendar pull-right"></i>
                </div>
            </div>
            <!--底部第二行输入-->
            <div class="row">
                <div class="col-sm-12">
                    <textarea name="" id="" cols="30" rows="5"  class="form-control" style="border:0"></textarea>
                </div>
            </div>
            <!--底部第三行发送-->
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-info pull-right">发送<i class="icon-font i-right"></i></button>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">关闭<i class="icon-font i-close"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页脚加载-->
<div class="my-footer">Copyright&copy;web1802</div>
<!--js引入部分-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="./data/js/header.js"></script>
<script>

</script>
</body>
</html>